<template>
  <view class="container">
    <view class="avatar">
      <!-- 上传组件 -->
      <span>商品图集</span>
      <u-upload ref="product_img" name="product_img" :maxCount="6" :fileList="filelist" width="100" height="100"
        @delete="del" @afterRead="read" />
    </view>

    <view class="content">
      <u-form labelPosition="left" labelWidth="60" :model="prolist" :rules="rules" ref="product">
        <!-- 部门 -->
        <u-form-item label="门店" prop="store" borderBottom @click="showstore = true">
          <u-input v-model="prolist.store.name" disabled disabledColor="#ffffff" placeholder="请选择所属门店"
            border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="商品分类" prop="store" borderBottom @click="showtype = true">
          <u-input v-model="prolist.typename_text" disabled inputAlign="center" disabledColor="#ffffff"
            placeholder="请选择商品所属分类" border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 品牌 -->
        <u-form-item label="品牌" prop="brank" borderBottom @click="showbrank = true">
          <u-input v-model="prolist.brank.name" disabled disabledColor="#ffffff" placeholder="请选择品牌"
            border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="系列" prop="branktype" borderBottom @click="showbranktype = true">
          <u-input v-model="prolist.btypename_text" disabled disabledColor="#ffffff" placeholder="请选择系列"
            border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="推荐栏:  " borderBottom @click="showsellcolumn = true">
          <u-input v-model="prolist.sellcolumn_text" inputAlign="center" disabled disabledColor="#ffffff"
            placeholder="请选择是否推荐" border="none"></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 名称 -->
        <u-form-item label="型号" prop="code">
          <u-input v-model="prolist.code" placeholder="请输入手表型号" />
        </u-form-item>
        <u-form-item label="表壳直径" >
          <u-input v-model="prolist.bkzj" placeholder="请输入表壳直径" />
        </u-form-item>
        <u-form-item label="销售热度">
          <u-input v-model="prolist.heat" placeholder="请输入产品销售热度" />
        </u-form-item>
        <u-form-item label="表壳厚度" prop="bkhd">
          <u-input v-model="prolist.bkhd" placeholder="请输入表壳厚度" />
        </u-form-item>
        <u-form-item label="表壳材质" prop="bkcz">
          <u-input v-model="prolist.bkcz" placeholder="请输入表壳材质" />
        </u-form-item>
        <u-form-item label="表带材质" prop="bdcz">
          <u-input v-model="prolist.bdcz" placeholder="请输入表带材质" />
        </u-form-item>
        <u-form-item label="机芯类型" prop="jxtype">
          <u-input v-model="prolist.jxtype" placeholder="请输入手表机芯类型" />
        </u-form-item>
        <u-form-item label="防水深度" prop="fssd">
          <u-input v-model="prolist.fssd" placeholder="请输入防水深度" />
        </u-form-item>
        <u-form-item label="上市时间">
          <u-input v-model="prolist.createtime_text" placeholder="上市时间未知" />
        </u-form-item>

        <!-- 全款 -->
        <u-form-item label="出售价" prop="price">
          <u-input v-model="prolist.price" placeholder="请填写出售价" />
        </u-form-item>
        <u-form-item label="官方售价" prop="price">
          <u-input v-model="prolist.offprice" placeholder="请填写官方售价" />
        </u-form-item>
        <!-- 商品描述 -->
        <u-form-item label="简介"  borderBottom>
          <u-textarea placeholder="不低于3个字" v-model="prolist.content" count></u-textarea>
        </u-form-item>

        <u-form-item label="视频上传:">
          <view class="vedio">
            <!-- 上传组件 -->
            <u-upload name="vedio" accept="video" :maxCount="1" :filelist="vediolist" width="100" height="100"
              @delete="delvedio" @afterRead="readvedio" />
          </view>
        </u-form-item>
        <!-- <u-action-sheet :show="showstore" :actions="stolist" title="请选所属的门店" @close="showstore = false"
          @select="storeSelect()">
        </u-action-sheet> -->
        <u-action-sheet :show="showsellcolumn" :actions="sellcolumnlist" title="请选择是否为推荐" @close="showsellcolumn = false"
          @select="sellcolumnSelect()">
        </u-action-sheet>
      

          <u-popup :show="showtype" @close="closeprotype" @open="openprotype">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in protypedata" :key="index">
                <view class="branktypename" @click="protypeSelect(item)">
                  <u-cell :title="item.name" >

                  </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>
          <u-popup :show="showstore" @close="closestore" @open="openstore">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in stolist" :key="index">
                <view class="branktypename" @click="storeSelect(item)">
                  <u-cell :title="item.name" >

                  </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>

          <u-popup :show="showbranktype" @close="close" @open="open">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in btypelist" :key="index">
                <view class="branktypename" @click="branktypeSelect(item)">
                  <u-cell :title="item.name" >

                  </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>

          <u-popup :show="showbrank" @close="closebrank" @open="openbrank">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in branklist" :key="index">
                <view class="branktypename" @click="brankSelect(item)">
                  <u-cell :title="item.name" >

                  </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>
        <view style="width: 100px;height:auto;margin-left: 20px;">
          <video v-if="vediolist.length > 0 || prolist.vedio_text != ''" :src="prolist.vedio_text" controls></video>
        </view>

        <!-- 提交按钮 -->
        <u-button text="修改商品" icon="pushpin" size="small" type="primary" :customStyle="btnStyle" @click="product" />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();

    this.proid = options.proid ? options.proid : 0;

    // this.brank();

    this.storelist();
    this.getbranktype();
    this.watchinfo();
    this.getproducttype();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      sellcolumnlist: [
        {
          sellcolumn: 0,
          name: "正常",
        },
        {
          sellcolumn: 1,
          name: "推荐",
        },
      ],
      showsellcolumn: false,
      protypedata: [],

      showbranktype: false,

      filelist: [],
      showtype: false,

      showstore: false,
      vediolist: [],
      auth: {},
      proid: 0,
      branklist: [],
      brank_text: "",
      store_text: "",
      newthumbArr:[],
      stolist: [],
      stoid: null,
      product_img: "",
      proid:0,
      piclist: [],
      btypelist: [],
      prolist: {
        brank: {
          name: "",
        },
        store: {
          name: "",
        },
        fssd: "",
        bdcz: "",
        brand_id: "",
        btypeid: "",
        bkhd: "",
        jxtype: "",
        code: "",
        bkzj: "",
        btypeid: 0,
        vedio_text: "",
        sellcolumn: "",
        heat:"",
        content:""
      },
      showbrank: false,

      vedio: "",
      price: 0,

      rules: {
       
        "store.name": {
          required: true,
          message: "请选择你所属的门店",
          trigger: ["blur", "change"],
        },
        "brank.name": {
          required: true,
          message: "请选择你所属的品牌",
          trigger: ["blur", "change"],
        },
        "btype.name": {
          required: true,
          message: "请选择你所属的品牌系列",
          trigger: ["blur", "change"],
        },
        name: {
          required: true,
          message: "请填写商品名称",
          trigger: ["blur", "change"],
        },

        price: {
          required: true,
          message: "请填写出售价",
          trigger: ["blur", "change"],
        },
        offprice: {
          required: true,
          message: "请填写官方售价",
          trigger: ["blur", "change"],
        },

        code: {
          required: true,
          message: "请填写手表型号",
          trigger: ["blur", "change"],
        },
        jxtype: {
          required: true,
          message: "请填写机芯类型",
          trigger: ["blur", "change"],
        },
       
        bkhd: {
          required: true,
          message: "请填写表壳厚度",
          trigger: ["blur", "change"],
        },
        bkcz: {
          required: true,
          message: "请填写表壳材质",
          trigger: ["blur", "change"],
        },
        bdcz: {
          required: true,
          message: "请填写表带材质",
          trigger: ["blur", "change"],
        },
        fssd: {
          required: true,
          message: "请填写防水深度",
          trigger: ["blur", "change"],
        },
      },
    };
  },

  methods: {
    open() {
      this.showbranktype = true;
      // console.log('close');
    },
   
    close() {
      this.showbranktype = false;
      // console.log('close');
    },
    openstore() {
      this.showstore = true;
      // console.log('close');
    },
   
    closestore() {
      this.showstore = false;
      // console.log('close');
    },
    openbrank() {
      this.showbrank = true;
      // console.log('close');
    },
   
    closebrank() {
      this.showstore = false;
      // console.log('close');
    },
    closeprotype() {
      this.showtype = false;
      // console.log('close');
    },
    openprotype() {
      this.showtype = true;
      // console.log('close');
    },
    async getproducttype() {
      let data = {
        adminid: this.auth.id,
      };

      let result = await this.$u.api.product.getprotypedata(data);

      if (result.code) {
        this.protypedata = result.data;
      }
    },
    async getbranktype(e) {
      let data = {
        adminid: this.auth.id,
        brand_id: e,
      };

      let result = await this.$u.api.product.getbtypelist(data);

      if (result.code) {
        this.btypelist = result.data;
      }
    },
    //
    branktypeSelect(e) {
      this.prolist.btypename_text = e.name;
      this.prolist.btypeid = e.id;
      this.showbranktype =  false
    },

    del(e) {
       this.filelist.map(async (item, index) => {

        if (index == e.index) {
          // 删除数组中的某一项

          let data = {
            proid: this.proid,
            product_img: e.file.url,
          };
          var result = await this.$u.api.product.delthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 2000,
              complete: () => {
                this.filelist.splice(e.index, index);

                // 还剩余一张的时候清空
                if (index == 0 && e.index == 0) {
                  this.filelist = [];
                  this.prolist.product_img = ""
                }
              },
            });
            return false;
          }
        }
      });
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist = this.filelist.concat({ url: result.data });

        this.newthumbArr = this.newthumbArr.concat(result.data)


        let userArray = Object.entries(this.filelist).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 把想要的路径追加到数组
          this.piclist.push(item.value.url);
        });

        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.prolist.product_img = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    async readvedio(item) {
      //组装上传数据
      var data = {
        filePath: item.file.url,
        name: "product_img",
        header: {},
        formData: {
          proid: this.proid,
          type: "edit",
        },
      };

      uni.showLoading({
        title: '正在上传...'
      });

      //调用接口
      var result = await this.$u.api.product.vedioupload(data);

      if (result.code) {
        uni.hideLoading();
        this.vediolist = [{ url: result.data }];

        

        this.newthumbArr = this.newthumbArr.concat(result.data)


        //修改本地存储中的图像内容
        this.prolist.vedio_text = result.data;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          complete: () => {
            setTimeout(function () {
              uni.hideLoading();
            }, 2000);
          }
        });
        return false;
      }
    },
    // 手表详情
    async watchinfo() {
      let data = {
        adminid: this.auth.id,
        proid: this.proid,
      };

      let result = await this.$u.api.product.find(data);
      {
        if (result.code) {
          this.prolist = result.data;

          if (this.prolist.thumbs_text.length > 0) {
            this.filelist = this.prolist.thumbs_text.map((item) => {
              return {
                url: item,
              };
            });
          } else {
            this.filelist1 = [];
          }
        } else {
          this.$refs.notice.show({
            type: "warning",
            message: result.msg,
            duration: 1200,
            complete: () => {
              uni.$u.route({
                type: "navigateBack",
                delta: 1,
              });

              return false;
            },
          });
        }
      }
    },
    sellcolumnSelect(e) {
      this.prolist.sellcolumn_text = e.name;
      this.prolist.sellcolumn = e.sellcolumn;
    },
    brankSelect(e) {
      this.prolist.brank.name = e.name;
      this.prolist.brand_id = e.id;
      this.showbrank = false

      this.getbranktype(e.id);
    },
    protypeSelect(e) {
      this.prolist.typename_text = e.name, 
      this.prolist.ptypeid = e.id;
      this.showtype =false
      this.brank(e.id)
    },
    storeSelect(e) {
      this.prolist.store.name = e.name;
      this.prolist.stoid = e.id;
      this.showstore = false
    },
    product() {
      let urlArray = this.filelist.map(item => item.url);

      this.$refs.product
        .validate()
        .then(async () => {
          let data = {
            id: this.prolist.id,
            jxtype: this.prolist.jxtype,
            bkcz: this.prolist.bkcz,
            product_img: urlArray,
            bkhd: this.prolist.bkhd,
            bkzj: this.prolist.bkzj,
            price: this.prolist.price,
            offprice: this.prolist.offprice,
            stoid: this.prolist.stoid,
            brand_id: this.prolist.brand_id,
            btypeid: this.prolist.btypeid,
            sellcolumn: this.prolist.sellcolumn,
            fssd: this.prolist.fssd,
            code: this.prolist.code,
            ptypeid: this.prolist.ptypeid,
            content: this.prolist.content,
            heat:this.prolist.heat,
            newthumbArr:this.newthumbArr,
            vedio:this.prolist.vedio_text

          };

          let result = await this.$u.api.product.edit(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.$u.route({
                  type: "redirectTo",
                  url: "/pagesC/product/product/edit",
                  params: {
                    proid: this.proid,
                  },
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },

    async storelist() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.storelist(data);

      if (result.code) {
        this.stolist = result.data;
      }
    },
    async brank() {
      let result = await this.$u.api.product.branks({
        adminid: this.auth.id,
        stoid: this.auth.stoid,
        proid:this.proid
      });

      if (result.code) {
        this.branklist = result.data;
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
        });
      }
    },
  },
};
</script>

<style>
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.u-form-item__body__left__content__label.data-v-5e7216f1 {
  width: 75px;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}
.branktypename{
  text-align: center;
}
</style>
